<template>
  <view class="home-container">
    <!-- 1. 顶部Banner -->
    <view class="banner-section">
      <view class="banner-top" @click="navToSearch">
        <image
          style="width: 40rpx; height: 40rpx"
          src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756021517435.png?x-oss-process=image/resize,w_200,h_200"
        ></image>
        <span>请搜索</span>
        <view class="flex-io">
          <image
            style="width: 40rpx; height: 40rpx"
            src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756021522290.png?x-oss-process=image/resize,w_200,h_200"
          ></image>
        </view>
      </view>
      <image
        class="banner-image"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756005641178.webp"
        mode="aspectFill"
      ></image>
      <view class="banner-title">
        <image
          style="width: 40rpx; height: 40rpx"
          src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756019475959.png?x-oss-process=image/resize,w_200,h_200"
        ></image>
        <span>每周海外游戏：低配版纪念碑谷</span>
      </view>
    </view>

    <!-- 2. 游戏排行榜 -->
    <view class="game-list">
      <view
        class="game-item"
        v-for="(game, index) in gameList"
        :key="index"
        @click=""
      >
        <text class="rank-number">{{ index + 1 }}</text>
        <!-- Starting from 2 as in the image -->
        <image
          class="game-icon"
          :src="game.icon"
          mode="aspectFill"
          @click="handleToHome(game)"
        ></image>
        <view class="game-info">
          <text class="game-name">{{ game.name }}</text>
          <text class="game-category">{{ game.category }}</text>
          <view class="game-hotness">
            <text class="fire-icon">🔥</text>
            <text>热度值：{{ game.hotness }}</text>
          </view>
        </view>
        <button
          class="subscribe-btn"
          v-if="!game.is_subscribe"
          @click.stop="handleSubscribe(game)"
        >
          订阅
        </button>
        <button
          class="subscribe-btn"
          v-else
          @click.stop="handleSubscribe(game)"
        >
          取消订阅
        </button>
      </view>
    </view>

    <!-- 3. 今日开测 -->
    <view class="section-container">
      <view class="section-header">
        <text class="section-title">今日开测</text>
        <text class="more-link">更多 ></text>
      </view>
      <view class="section-content">
        <view class="recommend-list">
          <view
            class="recommend-card"
            v-for="(game, index) in todayGames"
            :key="index"
            @click="handleToHome(game)"
          >
            <image class="recommend-card-icon" :src="game.icon"></image>
            <text class="game-card-name">{{ game.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 4. 今日开服 -->
    <view class="section-container">
      <view class="section-header">
        <text class="section-title">今日开服</text>
        <text class="more-link">更多 ></text>
      </view>
      <view class="section-content">
        <view class="recommend-list">
          <view
            class="recommend-card"
            v-for="(game, index) in makeGames"
            :key="index"
             @click="handleToHome(game)"
          >
            <image class="recommend-card-icon" :src="game.icon"></image>
            <text class="game-card-name">{{ game.name }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部自定义tabbar -->
    <custom-tabbar
      :currentIndex="currentTabIndex"
      @tabChange="handleTabChange"
    />
    <!-- 底部占位，防止内容被tabbar遮挡 -->
    <view class="tabbar-placeholder"></view>
  </view>
</template>

<script>
import CustomTabbar from "@/components/tabbar.vue";
import { getGameList } from "@/api";
import { showToast, tabbarTo } from "@/utils/helper";
export default {
  components: {
    CustomTabbar,
  },
  data() {
    return {
      currentTabIndex: 0,
      gameList: [],
      todayGames: [
        {
          name: "正版传奇",
          size: "28.2M",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756351338703.jpeg?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "http://sswl.youxi54.com/cqhjb/yPKiDG.html?bd_vid=3479765231234920307",
        },

        {
          name: "逍遥情缘",
          size: "13.5M",
          icon: "http://xy.skysgame.com/images/zhiye_rose_xyx01.png?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "http://xy.skysgame.com/index.shtml",
        },
        {
          name: "大屠龙",
          size: "14.1M",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756351338711.jpeg?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "https://dtl.aiwyou.com/",
        },
        {
          name: "怒火一刀",
          size: "31.1M",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756351338713.jpeg?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "http://www.nuhuoyidao.cn/wap/",
        },
        {
          name: "三国志战略版",
          size: "25.3M",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756351338710.png?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "https://sgzzlb.lingxigames.com/m/",
        },
        {
          name: "天命6",
          size: "98.8M",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756086480415.jpeg?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "https://m.18183.com/down/1944535.html",
        },
        {
          name: "仙剑世界",
          size: "28.9M",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756351338708.png?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "https://xjsj.cmge.com/",
        },
      ],
      makeGames: [
        {
          name: "战警大国崛起",
          size: "1.2K",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756360964284.png?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "https://zj.dragonest.com/",
        },
        {
          name: "梦回白玉京",
          size: "1.6K",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756360964290.png?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "http://zsz.you99x.cn/zsz2-14886-ln0001007-971004.html",
        },
        {
          name: "时隙之旅",
          size: "1.5M",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756360964294.png?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "http://zsz.91wangyx.com/zsz2-15034-lm0002102-971002.html",
        },
        {
          name: "帝王三国",
          size: "1.8M",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756360964292.png?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "http://shiming.xmxu.cn/activity_activity_diwang.sanguo.html",
        },
        {
          name: "华夏千秋",
          size: "25.3M",
          icon: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-28/1756360964296.png?x-oss-process=image/resize,w_200,h_200",
          is_subscribe: false,
          url: "https://app.ali213.net/aznew/697439.html",
        },
      ],
    };
  },
  methods: {
    handleTabChange(index) {
      this.currentTabIndex = index;
      tabbarTo(index);
    },
    handleSubscribe(game) {
      game.is_subscribe = !game.is_subscribe;
      showToast(game.is_subscribe ? "已订阅" : "已取消订阅");
    },
    handleToHome(game) {
      uni.navigateTo({
        url: "/pages/search/webView?url=" + game.url,
      });
    },
    async getGameListData() {
      const num = 20000;
      const res = await getGameList();
      res.data = res.data.map((i, index) => ({
        ...i,
        category: "热门游戏",
        hotness: num - index * 458,
        is_subscribe: false,
      }));
      this.gameList = res.data;
    },
    navToSearch() {
      uni.navigateTo({
        url: "/pages/search/index",
      });
    },
  },
  onShow() {
    this.getGameListData();
  },
};
</script>

<style scoped>
.home-container {
  background-color: #ffffff;
  padding-bottom: 120rpx; /* Space for tab bar */
}

/* Banner */
.banner-section {
  position: relative;
  width: 100%;
  height: 300rpx;
}
.banner-image {
  width: 100%;
  height: 100%;
}
.banner-title {
  position: absolute;
  bottom: 10rpx;
  left: 20rpx;
  color: white;
  font-size: 28rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  display: flex;
}
.banner-top {
  position: absolute;
  bottom: 7.2rem;
  left: rem;
  color: #eee;
  font-size: 0.875rem;
  font-weight: bold;
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
  display: flex;
  z-index: 88;
  opacity: 0.8;
  justify-content: space-between;
  padding: 0 0.625rem;
  width: 91%;
}
.flex-io {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: end;
}

/* Game List */
.game-list {
  background-color: #fff;
  padding: 0 30rpx;
  max-height: 700rpx;
  overflow-y: auto;
}
.game-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.rank-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff4500; /* Reddish color for rank */
  width: 60rpx;
  text-align: left;
}
.game-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
}
.game-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 120rpx;
}
.game-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}
.game-category,
.game-hotness {
  font-size: 24rpx;
  color: #999;
}
.game-hotness {
  display: flex;
  align-items: center;
}
.fire-icon {
  font-size: 24rpx;
  color: #ff6b21;
  margin-right: 6rpx;
}
.subscribe-btn {
  width: 120rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ff8c00;
  color: #ff8c00;
  font-size: 24rpx;
  border-radius: 28rpx;
  padding: 0;
  margin: 0;
}

/* Common Section */
.section-container {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 30rpx 30rpx;
  border-top: 20rpx solid #f5f5f5;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.more-link {
  font-size: 24rpx;
  color: #999;
}
.section-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 底部占位 */
.tabbar-placeholder {
  height: 100rpx;
}

.game-section {
  padding: 30rpx 0 30rpx 30rpx;
  border-bottom: 20rpx solid #f5f5f5;
}

.section-header {
  margin-bottom: 26rpx;
  text-align: center;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.recommend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}
.game-scroll-list {
  white-space: nowrap;
}

.game-card,
.recommend-card {
  display: inline-block;
  vertical-align: top;
  margin-right: 20rpx;
  text-align: center;
  width: 21%;
}

/* 游戏卡片 */
.game-card-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  margin-bottom: 10rpx;
}

.game-card-name {
  display: block;
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-card-size {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.subscribe-button {
  width: 120rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  color: #ff8c00;
  border: 1px solid #ff8c00;
  background-color: #fff;
  border-radius: 25rpx;
  padding: 0;
}
/* 推荐卡片 */
.recommend-card-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 30rpx;
}
</style>
